<template>
    <div>

        <!-- 卡片视图区 -->
         <el-card class="main_card">
              <!-- 提示区域 -->
              <el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert>
              <!-- 步骤条区域 -->
              <el-steps :space="200" :active="activeIndex-0" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="租赁信息"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品介绍"></el-step>
                <el-step title="完成"></el-step>
              </el-steps>
              <!-- 侧边标签栏 -->
              <!-- form嵌套tabs -->
              <el-form :model="addForm" :rules="addFormrules" ref="addFormRef" label-width="100px" label-position="top">
               <el-tabs tab-position="left"  v-model="activeIndex" :before-leave="beforeTabLeave"  >

                <el-tab-pane label="基本信息" name="0">
                    <el-form-item label="商品名称" prop="name">
                       <el-input v-model="addForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品库存" prop="inventory">
                       <el-input v-model="addForm.inventory" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类" prop="cat">
                        <el-cascader v-model="newGoodCatId" :options="cateList" :props="cascaderProps" 
                        @change="handleChange" ></el-cascader>
                    </el-form-item>
                </el-tab-pane>

                <el-tab-pane label="租赁属性" name="1">
                    <el-form-item label="租期单位" >
                        <el-col :span="8">
                            <el-input v-model="addForm.leasePeriodDays" type="number"></el-input>
                        </el-col>
                        
                        <el-col :span="11">
                            <el-select v-model="selectValue" placeholder="请选择">
                                <el-option  key="1" label="天" value="1">
                                </el-option>
                                <el-option  key="2" label="周" value="2">
                                </el-option>
                            </el-select>
                            为一期
                        </el-col>
                    </el-form-item>
                    <el-form-item label="单期价格" >
                       <el-input v-model="addForm.pricePerPeriod" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="租赁类型" >
                        <el-switch style="display: block" v-model="rent_type" active-color="#13ce66" inactive-color="#ff4949"
                        active-text="先租后买"  inactive-text="仅供出租">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="商品总价"  v-if="rent_type">
                       <el-input v-model="addForm.totalPrice" type="number"></el-input>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品图片" name="2">
                    <!-- action表示图片要上传到的后台API地址 -->
                    <el-upload  :action="uploadURL" :on-preview="handlePreview" 
                    :on-remove="handleRemove" list-type="picture" :on-success="handleSuccess" name="uploadFile" :headers="header">
                        <button size="small" type="primary" class="uploadImg_btn" >点击上传</button>
                    </el-upload>
                </el-tab-pane>
                <el-tab-pane label="商品介绍" name="3">
                    <!-- 富文本编辑器 -->
                    <quill-editor v-model="addForm.description"></quill-editor>
                    <button type="primary"  @click="addNewGoods" class="addFinal_btn">添加商品</button>
                </el-tab-pane>
               </el-tabs>
              </el-form>
              
         </el-card>

         <!-- 图片预览 -->
         <el-dialog title="图片预览" :visible.sync="previewDialogVisible" width="50%" >
             <img :src="previewPath" alt="" class="previewImg">
         </el-dialog>
    </div>
</template>



<script>
export default {
    data(){
        return{
            selectValue:'',
            rent_type:true,
            activeIndex:'0',
            header:{merchant:window.sessionStorage.getItem("merchant")},
            addForm:{
                url:'',
                name:'',
                catId:'',
                description:'',
                leasePeriodDays:'',
                pricePerPeriod:'',
                upperLimit:'',
                totalPrice:'',
                inventory:'',
                merchantId:1               
            },
            addFormrules:{
                name:[{required:true,message:"请输入商品名称",trigger:'blur'}],
                inventory:[{required:true,message:"请输入商品库存",trigger:'blur'}]
                

            },
            checkIfPass:false,
            newGoodCatId:'',
            cateList:[],
            cascaderProps:{
                value:'catId',
                label:'catName',
                children:'cats',
                expandTrigger: 'hover',
                checkStrictly:true,
                emitPath:false
            },
            uploadURL:'http://119.23.40.43/rent/upload',
            previewPath:'',
            previewDialogVisible:false

        }
    },
    created(){
        this.getCateList();
    },
    methods:{
        //   获取商品分类数据
      async getCateList(){
          const{data:res}=await this.$http.get('rent/cat/findBypid/0');
          console.log(res);
          if(res.code!=200)
          return this.$message.error("获取商品分类失败!")
          this.cateList=res.data;
      },
      handleChange(){
        console.log(this.newGoodCatId)
        this.addForm.catId=this.newGoodCatId;
      },
      beforeTabLeave(activeName,oldActiveName){
          this.$refs.addFormRef.validate(valid=>
          {
              if(!valid)
              return this.$message.error("请填写完整的基本信息!");
              this.checkIfPass=true;
          })
          if(this.checkIfPass==false)
            return false;
      },
      handlePreview(file){
        this.previewPath=file.url;
        console.log(file.response);
        this.previewDialogVisible=true;
      },
      handleRemove(file){
          const filePath=file.response.data;
          const i=this.addForm.url.findIndex(x=>x.pic==filePath);
          this.addForm.url.splice(i,1);
          console.log(this.addForm);

      },
      handleSuccess(response){
          console.log(response)         
          this.addForm.url=response.data;        
      },
      addNewGoods(){
           this.$refs.addFormRef.validate(async valid=>{
              if(!valid)
              return this.$message.error("请填写必要的表单项!");
              console.log(this.addForm);
              this.addForm.upperLimit=this.addForm.totalPrice/this.addForm.pricePerPeriod;
             const {data:res}=await this.$http.post('rent/rentalGoods/add',this.addForm);
             console.log(res);
             if(res.code!=200)
             return this.$message.error("添加商品失败!");
             this.$message.success("添加商品成功!");
             this.$router.push('/listRent');
          })
      }
    }
}
</script>


<style scoped lang="less">
.el-breadcrumb 
{
    margin-bottom:15px;
    font-size: 12px;
}
/deep/.el-tabs__item{
    color: #909399; 
}
/deep/.el-step__title.is-process
{
    color:#ff9a9e;
}
/deep/.el-step__head.is-process
{
    color:#ff9a9e;
    border-color: #ff9a9e;
}
.uploadImg_btn{
    border-radius:25px;
    margin-top:15px;
    margin-left:10px;
    height:40px;
    width:100px;
    font-weight:500;
    font-size:16px;  
    background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
    border:none;
    transition: 0.3s;
    cursor: pointer;
    color: #000;
    &:hover{
        transform: scale(1.1);
        
    }
}
.addFinal_btn{
    margin-top:15px;
    border-radius:25px;
    margin-left: 300px;
    height:40px;
    width:100px;
    font-weight:500;
    font-size:16px;  
    background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
    border:none;
    transition: 0.3s;
    cursor: pointer;
    color: #000;
    &:hover{
        transform: scale(1.1);
        
    }
}
.el-steps
{
    margin:15px 0;
}
.el-checkbox
{
    margin:0 10px 0 0  im !important;
}
.previewImg
{
    width:100%;
}
.ql-editor
{
    min-height:300px;
}

</style>